<template>
  <div class="page_apart_box">
    <div class="page_apart">
      <div class="page_up green" @click="prePage()">上一页</div>
      <div class="page_cont_box">
        <div class="scrollBox" ref="pageBox">
          <li
            :class="{ choose: index + 1 == currentPage }"
            v-for="(item, index) in list"
            :key="index"
            @click="thisPage(index)"
          >
            {{ item }}
          </li>
        </div>
      </div>
      <div class="page_down green" @click="nextPage()">下一页</div>
      <div class="page_last green" @click="lastPage()">尾页</div>
      <div class="page_search">
        <input
          type="text"
          placeholder="页码"
          v-model="pageIndex"
          @keydown.enter="searchIndex()"
        />
        <div class="search_btn" @click="searchIndex()">
          <img src="../../assets/angle-right.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "page_apart",
  props: {
    list: Number,
  },
  data() {
    return {
      defaultList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
      pageIndex: "", //页码数
      currentPage: 1, //当前页码
      omit: 5, //省略数
      lists: [],
      beforePage: 1,
    };
  },
  watch: {

  },
  mounted() {
    for (let i = 1; i <= this.list; i++) {
      this.lists.push(String(i));
    }
  },
  methods: {
    thisPage(index) {
      this.currentPage = index + 1;
      this.$parent.pageGet(index + 1);
    },
    searchIndex() {
      if (this.pageIndex > 0 && this.pageIndex <= this.list) {
        if (this.pageIndex != "") {
          this.$parent.pageGet(this.pageIndex);
          this.currentPage = this.pageIndex;
        }
      }
    },
    lastPage() {
      this.$parent.pageGet(this.list);
      this.currentPage = this.list;
    },
    nextPage() {
      if (this.currentPage != this.list) {
        this.$parent.pageGet(++this.currentPage);
      }
    },
    prePage() {
      if (this.currentPage != 1) {
        this.$parent.pageGet(--this.currentPage);
      }
    },
  },
};
</script>

<style scoped>
.page_apart_box {
  display: flex;
  justify-content: center;
}
.page_apart {
  display: flex;
  justify-content: center;
}
.page_cont_box {
  /* position: relative; */
  /* width: 122px; */
  /* overflow: hidden; */
  /* z-index: 111; */
    margin: 0 20px;
}
.page_cont_box .scrollBox {
  /* position: absolute; */
  display: flex;
  align-items: center;
  transition: all 0.2s;

  
}
.page_cont_box li {
  display: inline-block;
  color: #21262c;
  font-size: 18px;
  font-family: Impact;
  font-weight: 400;
  margin: 0 15px 0 0;
  width: 15px;
  /* transition: all 0.2s; */
}
li:hover {
  cursor: pointer;
}
.green {
  width: 50px;
  height: 20px;
  background: #659274;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.58);
  border-radius: 10px;
  color: #fff;
  font-size: 10px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  line-height: 20px;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.55);
  text-align: center;
  margin: 0 10px;
}
.green:hover {
  cursor: pointer;
}
.page_search {
  display: flex;
  margin: 0 15px;
}
input {
  width: 29px;
  height: 21px;
  padding: 0 7px;
  background: #ffffff;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.26);
  border-radius: 5px;
}
input::-webkit-input-placeholder {
  font-size: 10px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #999999;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.09);
}
.search_btn {
  width: 20px;
  height: 20px;
  background: #659274;
  border-radius: 10px;
  margin-left: 10px;
  text-align: center;
  overflow: hidden;
}
.search_btn:hover {
  cursor: pointer;
}
.search_btn img {
  width: 19px;
  height: 13px;
  margin: 0;
  transform: translateY(-20px);
  filter: drop-shadow(#fff 0 20px);
}
.page_cont_box .choose {
  color: #659274;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  font-size: 21px;
}
</style>